<template>
  <div class="card-list" ref="content" >
    <a-list
      rowKey="id"
      :grid="{gutter: 24, lg: 3, md: 2, sm: 1, xs: 1}"
      :dataSource="dataSource"
      :loading="tableLoding"
    >
      <a-list-item slot="renderItem" slot-scope="item">
        <template v-if="!item || item.id === undefined">
          <a-button class="new-btn" type="dashed" @click="showAdd">
            <a-icon type="plus"/>
            新增任务类型
          </a-button>
        </template>
        <template v-else>
          <a-card :hoverable="true">
            <a-card-meta>
              <a slot="title">{{ item.task_name }}</a>
              <!-- <a-avatar class="card-avatar" slot="avatar" :src="item.avatar" size="large"/> -->
              <div class="meta-content" slot="description">
                <div class="meta-box">
                  <img style="width:30px;height:30px" :src="item.icon_http_url" />
                  <span>
                    任务ID：{{ item.id }}
                  </span>
                  <span>
                    任务状态：<span :class="{ redColor: item.is_enable=='2', greenColor: item.is_enable=='1' }"> {{ item.is_enable=='1'?'上架中':'下架中' }}</span>
                  </span>
                </div>
              </div>
            </a-card-meta>
            <template class="ant-card-actions" slot="actions">
              <a @click="showEditTask(item)">编辑</a>
              <a @click="setTaskEnable(item)">{{item.is_enable=='1'?'下架':'上架'}}</a>
              <!-- <a >删除</a> -->
            </template>
          </a-card>
        </template>
      </a-list-item>
    </a-list>
    <!-- <div class="pagination_box">
      <a-pagination v-model="current" :total="total"/>
    </div> -->
    <a-modal :title="createOrEdit==1?'新增任务类型':'修改任务类型'" class="add_modal" v-model="modalAdd" :footer="null"  :width="1200" :loading="upLoding">
      <div class="add_modal_content">
        <!-- <div style="width:200px;height:320px">
          <div style="margin-bottom:10px">任务模板:</div>
          <img style="width:200px;height:320px" :src="defaultTmpImg" alt="" @click="checkTemp">
        </div> -->
        <a-form class="add_modal_form" @submit="handleSubmit" :form="form">
        <div class="form-item-row">
          <a-form-item
            label="任务名称"
            :labelCol="{lg: {span: 7}, sm: {span: 7}}"
            :wrapperCol="{lg: {span: 17}, sm: {span: 17} }">
            <a-input
            v-decorator="[
                'task_name',
                {rules: [{ required: true }]}
            ]"
            name="task_name"
            placeholder="" />
          </a-form-item>
          <a-form-item
              label="任务类型"
              :labelCol="{lg: {span: 7}, sm: {span: 7}}"
              :wrapperCol="{lg: {span: 17}, sm: {span: 17} }">
              <a-input
                v-decorator="[
                    'task_type',
                    {rules: [{ required: true }]}
                ]"
                name="task_type"
                placeholder="多种类型用'|'隔开" />
          </a-form-item>
          <!-- <a-form-item
            :labelCol="{lg: {span: 7}, sm: {span: 7}}"
              :wrapperCol="{lg: {span: 17}, sm: {span: 17} }"
              label="选择任务模板">
              <a-radio-group v-decorator="['template',  {rules: [{ required: true }]}]" @change='radioChang'>
                <a-radio :value="1">
                  截图模板
                </a-radio>
                <a-radio :value="2">
                  阅读模板
                </a-radio>
                <a-radio :value="3">
                  商家模板
                </a-radio>
              </a-radio-group>
          </a-form-item> -->
        </div>
        <div class="form-item-row">
          <a-form-item
              label="安卓 url schema"
              :labelCol="{lg: {span: 7}, sm: {span: 7}}"
              :wrapperCol="{lg: {span: 17}, sm: {span: 17} }">
              <a-input
                v-decorator="[
                    'apk_open_url',
                    {rules: [{ required: true }]}
                ]"
                name="apk_open_url"
                placeholder="" />
          </a-form-item>
          <a-form-item
              label="苹果 url schema"
              :labelCol="{lg: {span: 7}, sm: {span: 7}}"
              :wrapperCol="{lg: {span: 17}, sm: {span: 17} }">
              <a-input
                v-decorator="[
                    'ios_open_url',
                    {rules: [{ required: true }]}
                ]"
                name="ios_open_url"
                placeholder=""/>
          </a-form-item>
        </div>  
        <div class="form-item-row">
          <a-form-item
              label="任务图标"
              :labelCol="{lg: {span: 7}, sm: {span: 7}}"
              :wrapperCol="{lg: {span: 17}, sm: {span: 17} }">
              <a-input
                v-decorator="[
                    'icon_url',
                    {rules: [{ required: true }]}
                ]"
                name="icon_url"
                placeholder=""
                :disabled="true" />
              <a-upload
                  name="files"
                  :multiple="true"
                  action="/api/v1/admin/uploadFile"
                  @change="handleImg_url($event,'icon_url')"
                  :show-upload-list="false"
              >
                  <a-button style="color:#fff;" type="primary">上传</a-button>
              </a-upload>
              
          </a-form-item>
          <a-form-item
              label="任务视频教程"
              :labelCol="{lg: {span: 7}, sm: {span: 7}}"
              :wrapperCol="{lg: {span: 17}, sm: {span: 17} }">
              <a-input
                v-decorator="[
                    'video_url'
                ]"
                name="video_url"
                placeholder=""
                :disabled="true" />
              <a-upload
                  name="files"
                  :multiple="true"
                  action="/api/v1/admin/uploadFile"
                  @change="handleImg_url($event,'video_url')"
                  :show-upload-list="false"
              >
                  <a-button style="color:#fff;" type="primary">上传</a-button>
              </a-upload>
              
          </a-form-item>
          
        </div>
        <div class="form-item-row">
          
          <a-form-item
              label="任务图片教程"
              :labelCol="{lg: {span: 7}, sm: {span: 7}}"
              :wrapperCol="{lg: {span: 17}, sm: {span: 17} }">
              <a-input
                v-decorator="[
                    'detail_img_url'
                ]"
                name="detail_img_url"
                placeholder=""
                :disabled="true" />
              <a-upload
                  name="files"
                  :multiple="true"
                  action="/api/v1/admin/uploadFile"
                  @change="handleImg_url($event,'detail_img_url')"
                  :show-upload-list="false"
              >
                  <a-button style="color:#fff;" type="primary">上传</a-button>
              </a-upload>
              
          </a-form-item>
          <a-form-item>
          </a-form-item>
        </div>
        <!-- <div class="form-item-row">
          
          <a-form-item>
          </a-form-item>
        </div>   -->
        <div style="text-align:right;margin-top:40px;">
          <a-button htmlType="submit" type="primary" style="margin-right:30px;color:#fff;">确认</a-button>
          <a-button style="margin-right:160px;" @click="hiedAdd">取消</a-button>
        </div>
      </a-form>
      </div>
      
    </a-modal>
    <a-modal class="img_modal" v-model="modalImg" :footer="null" :closable="false" :zIndex="1001" :width="480">
      <a-card hoverable style="width: 480px">
          <img
            alt="example"
            :src="defaultTmpImg"
            slot="cover"
          />
        </a-card>
    </a-modal>
  </div>
</template>

<script>
const defaultImgList = [
  '/task_detail_default.png','/task_detail_default.png','/task_detail_default.png'
]
import { taskLists, taskCreate, taskEdite, taskEnable } from '@/api/getData'
import aPagination from 'ant-design-vue/lib/pagination'
export default {
  name: 'TaskType',
  components:{aPagination},
  data () {
    return {
      form: this.$form.createForm(this),
      createOrEdit: 1,
      dataSource: [],
      current: 1,
      pageSize: 11,
      total: 0,
      modalAdd: false,
      content: '',
      title: '',
      tableLoding: false,
      upLoding: false,
      modalImg: false,
      defaultImgList,
      defaultTmpImg:  '/task_detail_default.png',
      taskItem: {}
    }
  },
  created(){
    this.getList()
  },
  methods: {
    setTaskEnable(item){
      let enabel =1;
      if(item.is_enable=='1'){
        enabel=2
      }
      taskEnable(item.id,enabel).then(res=>{
        console.log(res)
        this.getList()
      })
    },
    radioChang(e){
      this.defaultTmpImg = this.defaultImgList[e.target.value-1]
    },
    checkTemp(){
      if(!this.defaultTmpImg){
         this.$message.error('请先选择模板');
         return
      }
      this.modalImg = true
    },
    fileBefore(){
      console.log('fileBefore')
      // this.upLoding = true
    },
    handleImg_url(info,key) {
      // this.upLoding = false
      
      if (info.file.status !== 'uploading') {
          console.log(info.file, info.fileList);
      }
      if (info.file.status === 'done') {
          this.$message.success(`${info.file.name} 上传成功`);
          let obj = {};
          obj[key] = info.file.response.data.path
          this.form.setFieldsValue(obj);
      } else if (info.file.status === 'error') {
          this.$message.error(`${info.file.name} 上传失败`);
      }
    },
    showEditTask(item){
      // this.$router.push({path: '/taskadmin/taskDetail'})
      this.taskItem = item
      this.createOrEdit = 0
      this.modalAdd = true
      let obj = {};
      obj.task_name = item.task_name;
      obj.video_url = item.video_url;
      obj.detail_img_url = item.detail_img_url;
      obj.img_url1 = item.img_url1;
      obj.img_url2 = item.img_url2;
      obj.img_url3 = item.img_url3;
      // obj.template = item.template;
      obj.icon_url = item.icon_url;
      obj.apk_open_url = item.apk_open_url;
      obj.ios_open_url = item.ios_open_url;
      obj.task_type = item.task_type;
      // if(item.template == '截图模板'){
      //   obj.template = 1
      //   this.defaultTmpImg = this.defaultImgList[0]
      // }else if(item.template == '阅读模板'){
      //   obj.template = 2
      //   this.defaultTmpImg = this.defaultImgList[1]
      // }else{
      //   obj.template = 3
      //   this.defaultTmpImg = this.defaultImgList[2]
      // }
      setTimeout(()=>{
        this.form.setFieldsValue(obj);
      },300)
    },
    showAdd(){
      this.modalAdd = true
      this.createOrEdit = 1
      this.defaultTmpImg = '/task_detail_default.png'
      setTimeout(()=>{
        this.form.setFieldsValue({
          task_name:'',
          video_url:'',
          detail_img_url:'',
          img_url1:'',
          img_url2:'',
          img_url3:'',
          icon_url:'',
          apk_open_url:'',
          ios_open_url:'',
          task_type:''
        });
      },300)
    },
    hiedAdd(){
      this.modalAdd = false
    },
    getList(){
      this.tableLoding = true
      taskLists().then(res=>{
        console.log(res)
        let reslist = res.data.list
        reslist.unshift({})
        this.dataSource = reslist
      }).finally(e=>{
          this.tableLoding = false
      })
    },
    handleSubmit(e){
      let that = this;
      e.preventDefault()
      this.form.validateFields((err, values) => {
        if (!err) {
          // eslint-disable-next-line no-console
          // console.log('Received values of form: ', values)
          // console.log('that.createOrEdi',that.createOrEdit)
         this.$confirm({
            title: that.createOrEdit==1?'确认新增任务类型?':'确认修改任务类型?',
            content: '',
            onOk() {
              if(that.createOrEdit==1){
                taskCreate(values).then(res=>{
                  console.log(res)
                  if(res.code == 200){
                    that.$message.info('新增成功');
                    that.hiedAdd();
                    that.getList()
                  }
                })
              }else{
                values.task_id = that.taskItem.id
                taskEdite(values).then(res=>{
                  console.log(res)
                  if(res.code == 200){
                    that.$message.info('修改成功');
                    that.hiedAdd();
                    that.getList()
                  }
                })
              }
              
            },
            onCancel() {console.log('取消新增')}
        })
          
        }
      })
    }
  }
}
</script>

<style lang="less" scoped>
  @import "~@/components/index.less";

  .card-list {
    /deep/ .ant-card-body:hover {
      .ant-card-meta-title>a {
        color: @primary-color;
      }
    }

    /deep/ .ant-card-meta-title {
      margin-bottom: 12px;

      &>a {
        display: inline-block;
        max-width: 100%;
        color: rgba(0,0,0,.85);
      }
    }

    /deep/ .meta-content {
      position: relative;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      height: 54px;
      -webkit-line-clamp: 3;
      -webkit-box-orient: vertical;

      margin-bottom: 1em;
    }
  }

  .card-avatar {
    width: 48px;
    height: 48px;
    border-radius: 48px;
  }

  .ant-card-actions {
    background: #f7f9fa;

    li {
      float: left;
      text-align: center;
      margin: 12px 0;
      color: rgba(0, 0, 0, 0.45);
      width: 50%;

      &:not(:last-child) {
        border-right: 1px solid #e8e8e8;
      }

      a {
        color: rgba(0, 0, 0, .45);
        line-height: 22px;
        display: inline-block;
        width: 100%;
        &:hover {
          color: @primary-color;
        }
      }
    }
  }

  .new-btn {
    background-color: #fff;
    border-radius: 2px;
    width: 100%;
    height: 188px;
  }
.form-item-row{
    display: flex;
    margin-bottom: 15px
}
.form-item-row>div{
    flex: 1;
}
.form-item-row .ant-input{
    width: 200px !important;
}
.add_modal_content{
  display: flex;
}
.add_modal_form{
  flex: 1;
}
.meta-box{
  margin-top: 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
</style>
